<template>
  <el-form
    ref="formRef"
    :model="baseInfo"
    :rules="rules"
    :label-width="140"
    :inline="true"
    size="small"
  >
    <el-row :gutter="40">
      <el-col
        v-if="types==='edit'||types==='update'"
        :span="8"
      >
        <el-form-item
          style="width: 100%;"
          label="配送商编号"
          prop="distributeNo"
        >
          <el-input
            v-model="baseInfo.distributeNo"
            clearable
            disabled
            placeholder="请输入配送商名称"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="配送商名称"
          prop="distributeName"
        >
          <el-input
            v-model="baseInfo.distributeName"
            clearable
            placeholder="请输入配送商名称"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="统一社会信用代码"
          prop="creditCode"
        >
          <el-input
            v-model="baseInfo.creditCode"
            clearable
            placeholder="请输入统一社会信用代码"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="企业所在地区"
          prop="area"
        >
          <el-cascader
            ref="cascader"
            v-model="baseInfo.area"
            :popper-append-to-body="false"
            style="width: 100%;"
            :options="citys"
            placeholder="请选择企业所在地区"
            :props="{ expandTrigger: 'hover', label: 'regionName', value:'regionCode' }"
            clearable
            @change="areaChange"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="联系人"
          prop="contactsName"
        >
          <el-input
            v-model="baseInfo.contactsName"
            clearable
            placeholder="请输入联系人姓名"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="联系人电话"
          prop="contactsPhone"
        >
          <el-input
            v-model="baseInfo.contactsPhone"
            clearable
            placeholder="请输入手机号"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="详细地址"
          prop="address"
        >
          <el-input
            v-model="baseInfo.address"
            clearable
            placeholder="请输入详细地址"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="负责职员"
        >
          <el-select
            v-model="baseInfo.userId"
            style="width: 100%"
            clearable
            placeholder="请选择负责职员"
            @change="userChange"
            @clear="clearUser"
          >
            <el-option
              v-for="item in userOptions"
              :key="item"
              :value-key="item"
              :label="item.realName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {defineComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs, watch,} from 'vue'
import area from '@/utils/area.js'
import {crmStore} from '@CRM/store'
import {useRoute} from 'vue-router'
import {validateVETel} from '@/utils/validate'

export default defineComponent({
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
    types: {
      type: String,
      default: () => {},
    },
  },
  emits: ['baseInfo'],
  setup(props, context) {
    const currentInstance = getCurrentInstance()
    const route = useRoute()
    const api = inject('api')
    const citys = area
    const formRef = ref(null)
    const cascader = ref(null)
    var userInfo = crmStore.getters['user/userInfo']
    var formData = reactive({
      userInfo: userInfo,
      userOptions: [],
      agentId: route.query.agentId ? Number(route.query.agentId) : 0,
      baseInfo: {
        agentId: route.query.agentId ? Number(route.query.agentId) : 0,
        distributeName: '',
        creditCode: '',
        area: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        address: '',
        contactsName: '',
        contactsPhone: '',
        userId: userInfo?.ID || undefined,
        userName: userInfo?.realName || '',
        qualifications: [],
      },
    })
    const validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (validateVETel(value)) {
          callback(new Error('手机号格式不正确'))
        } else {
          callback()
        }
      }
    }
    var rules = reactive({
      distributeName: [
        {
          required: true,
          message: '请输入配送商名称',
          trigger: 'blur',
        },
      ],
      creditCode: [
        {
          required: true,
          message: '请输入统一社会信用代码',
          trigger: 'blur',
        },
      ],
      area: [
        {
          required: true,
          message: '请选择企业所在地区',
          trigger: 'change',
        },
      ],
      contactsName: [
        {
          required: true,
          message: '请输入联系人姓名',
          trigger: 'blur',
        },
      ],
      contactsPhone: [
        {
          required: true,
          validator: validateTel,
          trigger: 'blur',
        },
      ],
      address: [
        {
          required: true,
          message: '请输入详细地址',
          trigger: 'blur',
        },
      ],
      userId: [
        {
          required: true,
          message: '请选择负责职员',
          trigger: 'change',
        },
      ],
    })
    const areaChange = (val) => {
      if (val && val.length) {
        formData.baseInfo.provinceCode = val[0]
        formData.baseInfo.cityCode = val[1]
        formData.baseInfo.areaCode = val[2]
      } else {
        formData.baseInfo.provinceCode = ''
        formData.baseInfo.cityCode = ''
        formData.baseInfo.areaCode = ''
      }
    }
    // 获取职员列表
    const getStaffList = () => {
      api.common.STAFF_PEOPLE_LIST({ status: 1 }).then((res) => {
        if (res.code === 0) {
          formData.userOptions = res.data || []
        }
      })
    }
    const userChange = (val) => {
      var userItem = formData.userOptions.find((p) => p.id === val)
      if (userItem) {
        formData.baseInfo.userName = userItem.realName
      } else {
        formData.baseInfo.userName = ''
      }
    }
    const clearUser = () => {
      formData.baseInfo.userId = undefined
      formData.baseInfo.userName = ''
    }
    const baseInfoValidate = (callBack) => {
      formRef.value.validate(callBack)
    }
    // 获取代理商详情
    const getAgentDetail = (agentId) => {
      api.channelAgent.POTENTIALAGENT_DETAIL(agentId).then((res) => {
        if (!res.code && res.data) {
          var agentDetail = res.data.agent
          formData.baseInfo.distributeName = agentDetail.agentName
          formData.baseInfo.creditCode = agentDetail.creditCode
          formData.baseInfo.area = [
            agentDetail.provinceCode,
            agentDetail.cityCode,
            agentDetail.areaCode,
          ]
          formData.baseInfo.provinceCode = agentDetail.provinceCode
          formData.baseInfo.cityCode = agentDetail.cityCode
          formData.baseInfo.areaCode = agentDetail.areaCode
          formData.baseInfo.address = agentDetail.address
          formData.baseInfo.contactsName = agentDetail.userName
          formData.baseInfo.contactsPhone = agentDetail.tel
        }
      })
    }
    onMounted(() => {
      getStaffList()
      if (formData.agentId) {
        getAgentDetail(formData.agentId)
      }
    })

    watch(
      () => props.detail,
      (newval, oldval) => {
        if (newval) {
          formData.baseInfo = {
            ...newval,
            userId: newval.userId > 0 ? newval.userId : undefined,
            area: [newval.provinceCode, newval.cityCode, newval.areaCode],
          }
        }
      },
      { immediate: true }
    )

    return {
      formRef,
      cascader,
      ...toRefs(formData),
      rules,
      citys,
      baseInfoValidate,
      areaChange,
      userChange,
      clearUser,
    }
  },
})
</script>

